<template>
	<view class="container">
		<!-- 添加顶部绿色背景区域 -->
		<view class="header"></view>

		<!-- 头像和名称 -->
		<view class="user-info">
			<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/tongren_avatar.png" class="avatar"
				mode="aspectFit" />
			<view class="username" v-if="userInfo != ''">{{ userInfo.nickName }}</view>
			<view class="username" v-else>未登录</view>
		</view>

		<!-- 菜单栏 -->
		<view class="menu" v-if="userInfo != ''">
			<view class="menu-item" @click="goToOrderList">
				<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/order_icon.png"
					class="menu-icon" mode="aspectFit" />
				<text>我的订单</text>
			</view>
			<view class="menu-item" @click="goToQualityInfo">
				<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/zhibao.png"
					class="menu-icon" mode="aspectFit" />
				<text>我的质保</text>
			</view>
			<view class="menu-item" @click="goToCoupon">
				<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/coupon_icon.png"
					class="menu-icon" mode="aspectFit" />
				<text>优惠券</text>
			</view>
			<view class="menu-item" @click="goToAbout">
				<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/about.png"
					class="menu-icon" mode="aspectFit" />
				<text>关于我们</text>
			</view>
			<view class="menu-item" @click="goToHelpCenter">
				<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/help_icon.png"
					class="menu-icon" mode="aspectFit" />
				<text>帮助中心</text>
			</view>
			
			<!-- <view class="exit-btn" @click="logout">
        <image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/logout.png" class="menu-icon" mode="aspectFit" />
        <text>退出登录</text>
      </view> -->
		</view>
		<view v-else>
			<view class="goto-login-btn" @click="this.$tools.routerTo('/pages/index/login', 'navigateTo', 'none')">
				<text>前往登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				userInfo: '',
			};
		},
		onShareAppMessage() {
			return {
				title: '青少年近视防控领先方案', // 分享标题
				path: '/pages/index/index', // 分享路径
				imageUrl: 'https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/wechat_share.png', // 分享图片，这里使用生成的二维码图片
				success: function(res) {
					// 转发成功
					console.log("转发成功:");
				},
				fail: function(res) {
					// 转发失败
					console.log("转发失败:");
				}
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				const that = this
				console.log('获取信息');
				if (uni.getStorageSync('token') == null) {
					that.$tools.routerTo('/pages/index/login', 'navigateTo', 'none')
					return;
				}
				const islogout = uni.getStorageSync('islogout');
				if (islogout) {
					console.log('islogout', islogout)
					this.userInfo = ''
					return;
				}
				this.$http.GET('/app/user/info/person', {}, function(res) {
					console.log('成功获取用户信息', res);
					that.userInfo = res.data
				})
			},
			goToAbout() {
				uni.navigateTo({
					url: '/pages/index/about'
				})
			},
			// 跳转到订单列表页
			goToOrderList() {
				uni.navigateTo({
					url: '/pages/index/orderList'
				})
			},
			// 跳转到优惠券页
			goToCoupon() {
				uni.navigateTo({
					url: '/pages/index/couponList'
				})
			},
			// 跳转到帮助中心页
			goToHelpCenter() {
				uni.navigateTo({
					url: '/pages/index/help'
				})
			},
			// 跳转到质保信息页
			goToQualityInfo() {
				uni.navigateTo({
					url: '/pages/quality/qualityInfo'
				})
			},
			// 退出登录
			logout() {
				try {
					uni.removeStorageSync('token')
					uni.removeStorageSync('openid')
					uni.removeStorageSync('refreshToken')
					this.$tools.routerTo('/pages/index/login', 'navigateTo', 'none')
				} catch (error) {
					console.error('退出登录失败:', error)
					uni.showToast({
						title: '退出登录失败',
						icon: 'none'
					})
				}
			}
		},
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		height: 120px;
		background-color: #089790;
		border-radius: 0 0 25px 25px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30px;
		position: relative;
		top: 58px;
	}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin-bottom: 10px;
	}

	.menu {
		width: 90%;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		padding: 10px 15px;
		margin-top: 54px;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 20px 20px;
		border-bottom: 1px solid #eee;
		font-size: 18px;
		color: #383838;
	}

	.exit-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 20px;
		font-size: 18px;
		color: #383838;
		margin-top: 30vw;
	}

	.menu-icon {
		width: 24px;
		height: 24px;
		margin-right: 25px;
	}

	.logout-btn {
		width: 90%;
		background-color: #e64340;
		color: #fff;
		border-radius: 8px;
		height: 45px;
		line-height: 45px;
	}

	.goto-login-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 20px;
		font-size: 18px;
		color: #383838;
		margin-top: 30vw;

		width: 90%;
		background-color: #00BAAD;
		color: #fff;
		border-radius: 8px;
		height: 45px;
		line-height: 45px;
	}
</style>